<template>

  <el-row :gutter="20">
    <el-col :span="5">
      <div class="ca-box">
        <div class="ca-top">数据目录</div>
        <div style="padding: 20px 20px 0 20px">
          <el-input size="large" placeholder="请输入目录关键词"></el-input>
        </div>
        <div class="tree-box">
          <el-tree
              :data="getCategoryList"
              :props="defaultProps"
              default-expand-all
          >
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                   <span>{{ data.suffix }}</span>
                </span>
            </template>
          </el-tree>
        </div>
      </div>
    </el-col>
    <el-col :span="19">
      <div class="ca-box" style="padding: 20px;box-sizing: border-box">
        <div class="ca-search">
          <el-input
              size="large"
              v-model="search"
              placeholder="请输入搜索关键词"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <Search/>
              </el-icon>
            </template>
          </el-input>
          <el-button size="large" type="danger" style="margin-left: 20px;width: 150px">搜索</el-button>
        </div>

        <ul class="ca-label">
          <template v-for="item in labelList">
            <li>
              <span>{{ item.title }}：</span>
              <el-tag class="ca-tab" type="primary"
                      :effect="item.checked.every(element => element === true)?'dark':'plain'"
                      @click="item.checked.fill(false)">全部
              </el-tag>
              <template v-for="(item2,index2) in item.child">
                <el-tag class="ca-tab" type="primary" :effect="item.checked[index2]?'dark':'plain'"
                        @click="item.checked[index2] = !item.checked[index2]">{{ item2 }}
                </el-tag>
              </template>
            </li>
          </template>
        </ul>
        <div class="ca-head">
          <div :style="{color:current===0?'#2167fa':''}" @click="current = 0">发布时间 ▼</div>
          <div :style="{color:current===1?'#2167fa':''}" @click="current = 1">更新时间 ▼</div>
        </div>
        <br>
        <ul class="ca-list">
          <template v-for="item in listPageData">
            <li>
              <strong>{{ item.tableNameChain }}</strong>
              <div><span>责任部门：{{ item.respOfficeName }}</span> <span>责任联系人：{{ item.contactPerson }}</span>
                <span>部门联系人电话：{{ item.contactWay }}</span><span>数据目录：{{ item.dataCatalog }}</span></div>
              <div><span>数源部门：{{ item.dataUnitName }}</span> <span>更新时间：{{ item.pubDate }}</span>
                <span>发布时间：{{ item.dataUpdateDate }}</span></div>
              <div>
                <el-button type="primary" :icon="View">查看详情</el-button>
                <el-button type="primary" :icon="Document" plain>数据预览</el-button>
              </div>
            </li>
          </template>
        </ul>
        <div class="ca-footer">
          <el-pagination background layout="prev, pager, next" :total="1000"/>
        </div>
      </div>

    </el-col>
  </el-row>
</template>

<script setup>
import {getCategoryList, labelData, listPageData} from '../data/data.js'
import {reactive, ref} from "vue";
import {Document, View} from '@element-plus/icons-vue'

const defaultProps = reactive({
  children: 'children',
  label: 'label',
})

const search = ref('')
const current = ref(0)
const labelList = reactive(labelData)
</script>


<style scoped lang="scss">
.ca-box {
  height: calc(100vh - 90px);
  background-color: #ffffff;
}

.ca-top {
  line-height: 50px;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  background-color: #2758bb;
}

.tree-box {
  padding: 20px 40px;
  height: calc(100vh - 250px);
  overflow-y: auto;
}

.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ca-search {
  display: flex;
  padding: 20px;
  background-color: #fff5f2;
}

.ca-label {
  padding: 20px;
  font-size: 14px;

  li {
    margin: 15px 0;

    .ca-tab {
      cursor: pointer;
      margin-right: 20px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.ca-head {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding: 10px;
  font-size: 14px;
  display: flex;

  > div {
    cursor: pointer;
    text-align: center;
    width: 120px;
  }
}

.ca-list {
  height: calc(50vh + 20px);
  overflow-y: auto;
  font-size: 14px;

  > li {
    padding: 20px;
    box-sizing: border-box;
    background-color: #f8f8f8;
    margin-bottom: 20px;

    > div {
      margin: 15px 0;

      > span {
        width: 300px;
        display: inline-block;
        margin-right: 40px;
      }
    }
  }
}

.ca-footer {
  padding: 20px;
  display: flex;
  justify-content: right;
}
</style>
